import React, { Component } from 'react';
import { BrowserRouter, Link, Route } from 'react-router-dom';
/**
  BrowserRouter:路由根容器---底层是history封装
  Link:导航---被渲染成a标签
      属性：to表示要跳转的地址
  Route:线路---匹配导航地址，渲染对应的内容
      属性：path匹配地址栏地址的
            component用来加载组件的，切记，他只接受两种格式的数据,class和函数
            render用来加载组件,只接受一个函数
            children 也是用来加载组件的，只接受一个函数
            权重：component> render>children
            注意：在一个路由程序里，尽量使用一种加载组件的方式，不要混用
 */
import Home from './home';
import Other from './home2';
import './index.css';
export default class Index extends Component {
  render() {
    return (
      <div>
        <BrowserRouter basename="dist">
          <h1>今天开始路由</h1>
          <nav>
            <Link
              to={{
                pathname: '/home',
                search: '?name=张三&age=12岁',
                hash: '#job=web前端',
                state: {
                  $: 10000,
                  id: 468756
                }
              }}
              className="nav-item">
              首页
            </Link>
            <Link to="/other" className="nav-item">
              其他
            </Link>
          </nav>
          <main>
            <Route path="/" exact component={Home} />
            <Route path="/home" component={Home} />
            <Route path="/other" component={Other} />
           
          </main>
        </BrowserRouter>
      </div>
    );
  }
}
